@import '../../scssMixin/generateClassName2.module.scss';
@import '../../scss/vars.module.scss';
$--item-radius: 3px;
$--active-color: $--special-color;
$--active-bg:  mix($--special-color, #ffffff,10%);
$--normal-color: $text-color;
$--normal-bg: #f5f7f9;
$--disabled-color: #666666;
$--default-bc: #f2f2f2;
$--hover-color: mix($--special-color, #ffffff,10%);

:global {
    .z-info-left.z-cascader-left {
        padding-left: 0;
    }
    .z-cascader-label {
        margin-bottom: 16px;
        display: flex;
        flex: 1;
        align-items: center;
    }
    .z-cascader-label-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 33px;
        height: 33px;
        border-radius: 0 4px 4px 0;
        color: rgba($--normal-color, 0.7);
        background-color: rgba($--normal-color, 0.1);
        font-size: 18px;
    }
    .z-cascader-label-icon.click {
        color: $--active-color;
        background-color: $--active-bg;
        cursor: pointer;
        &:hover {
            background-color: rgba($--active-color, 0.4);
        }
    }
    .z-cascader-label-text {
        margin-left: 16px;
        flex: 1;
    }
}

@include z('cascader') {
    position: relative;
    min-height: 60px;
}
@include z('cascader-action') {
    border-radius: 0 $--item-radius $--item-radius 0;
    // border-left: 1px solid $--default-bc;
    white-space: normal;
    word-break: break-all;
    font-size: 12px;
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
    &:hover {
        background-color: darken($--hover-color, 10%);
        // border-color: darken($--hover-color, 20%) !important;
    }
}

@include z('cascader-item-text') {
    text-align: center;
    padding: 6px 10px;
    min-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
@include z('cascader-item') {
    // border: 1px solid $--default-bc;
    position: relative;

    // min-height: 26px;
    // line-height: 26px;
    // padding:6px 0;
    margin-right: 10px;
    background-color: $--normal-bg;
    margin-bottom: 16px;
    color: $--normal-color;
    user-select: none;
    border-radius: $--item-radius;
    font-size: 14px;
    &:hover {
        // $--active-bc: darken($--hover-color, 10%);
        cursor: pointer;
        // border-color: $--active-bc;
        background-color: $--hover-color;
        // @include z("cascader-action") {
        // 	border-color: $--active-bc;
        // }
    }
    &.active {
        // $--active-bc: lighten($--active-color, 45%);
        color: $--active-color;
        // border-color: $--active-bc;
        background-color: $--active-bg;
        // @include z("cascader-action") {
        // 	border-color: $--active-bc;
        // }
    }
    .close {
        float: right;
        margin-top: 8px;
        margin-left: 10px;
        font-style: normal;
        border: 1px solid #f5d8e8;
        width: 12px;
        text-align: center;
        height: 12px;
        line-height: 10px;
        font-family: Arial, Helvetica, sans-serif;
        color: #8b0a4b;
        opacity: 0.7;
        &:hover {
            opacity: 1;
        }
    }
    &.disabled {
        $--active-bc: lighten($--disabled-color, 45%);
        color: $--disabled-color;
        // border-color: $--active-bc;
        background-color: lighten($--disabled-color, 50%);
        // @include z("cascader-action") {
        // 	border-color: $--active-bc;
        // }
        &:hover {
            cursor: no-drop;
        }
    }
}
@include z('cascader-right') {
    width: 28px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    background-color: $--normal-bg;

    & > i {
        transition: all 0.2s ease-in-out;
        transform: rotate(180deg);
        color: $primary-color;
        &.rotate-90 {
            transform: rotate(0deg);
        }
    }
    &:hover > i {
        opacity: 0.8;
    }
}
